<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <%@ include file="/include/service-base-header.jsp" %>
    <title>返佣明细</title>

</head>
<body>
<div class="wrapper">
    <jsp:include page="/include/left_menu.jsp">
        <jsp:param name="index" value="4"/>
    </jsp:include>
    <div class="main-panel">
        <nav class="navbar navbar-expand-lg navigation_shadow_none">
            <div class="container-fluid">
                <div class="navbar-wrapper b-navbar-wapper">
                    <a class="b-navbar-title" href="${pageContext.request.contextPath}/s/distribution.do">分销系统</a>
                    <a class="b-navbar-title-active" href="#">返佣明细</a>
                </div>
            </div>
        </nav>
        <div class="container-fluid" style="margin-top: 1rem">
            <div class="col-md-12">
                <div class="card card-plain">
                    <div class="card-header card-header-primary">
                        <div class="card-title">返佣明细列表</div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table" id="table">
                                <thead class=" text-primary">
                                <tr>
                                    <th style="color: #9c27b0;font-size: 1rem">
                                        #
                                    </th>
                                    <th style="color: #9c27b0;font-size: 1rem">
                                        账号
                                    </th>
                                    <th style="color: #9c27b0;font-size: 1rem">
                                        注册时间
                                    </th>
                                    <th style="color: #9c27b0;font-size: 1rem">
                                        充值金额
                                    </th>
                                    <th style="color: #9c27b0;font-size: 1rem">
                                        充值时间
                                    </th>
                                    <th style="color: #9c27b0;font-size: 1rem">
                                        返佣金额
                                    </th>
                                </tr>
                                </thead>
                                <tbody id="tb1">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <nav aria-label="page">
                <ul class="pagination justify-content-center" id="p1">
                </ul>
            </nav>
        </div>
    </div>
</div>
</div>
</body>


<script>
    var data_source;
    var page_count = 15;

    function getSalesDetail() {
        var salesId = baseFn.getQueryString('salesId');
        $.ajax({
            url: baseUrl.base + baseUrl.sales + "/salesDetail",
            type: 'get',
            data: {'salesId': salesId},
            success: function (data) {
                if (data.code == "0") {
                    var res = data.results;

                    data_source = res;

                    cutPagination(1);

                    // 配置分页
                    $("#p1").pagination({
                        totalData: res.length,
                        showData: page_count,
                        callback: function (idx) {
                            cutPagination(idx);
                        }
                    });
                } else {
                    var res = data.msg;
                    alert(res);
                }
            }
        });
    };
    getSalesDetail();

    /**
     * 分页
     * @param page 从1开始
     */
    function cutPagination(page) {

        var start = (page - 1) * page_count;
        var end = start + page_count;

        if (end > data_source.length) {
            end = data_source.length;
        }

        $("#tb1").html("");
        for (var i = start; i < end; i++) {

            var user = data_source[i];

            var tr = document.createElement("tr");

            var td = document.createElement("td");
            var tdContent = document.createTextNode(i + 1);
            td.appendChild(tdContent);
            tr.appendChild(td);

            td = document.createElement("td");
            var phone = document.createTextNode(user.user_phone);
            td.appendChild(phone);
            tr.appendChild(td);

            td = document.createElement("td");
            var phone = document.createTextNode(timestampToTime(user.create_time));
            td.appendChild(phone);
            tr.appendChild(td);

            td = document.createElement("td");
            tdContent = document.createTextNode(user.rechage_money);
            td.appendChild(tdContent);
            tr.appendChild(td);


            td = document.createElement("td");
            tdContent = document.createTextNode(timestampToTime(user.rechage_time));
            td.appendChild(tdContent);
            tr.appendChild(td);

            td = document.createElement("td");
            tdContent = document.createTextNode(user.back_money);
            td.appendChild(tdContent);
            tr.appendChild(td);

            document.getElementById("tb1").append(tr);
            document.getElementById("tb1").innerHTML;
        }

    }

</script>
</html>